<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>温度计</title>
  <script src="js/jquery.min.js"></script>
  <script src="js/echarts.js"></script>
  <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
  <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
  <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
  <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
</head>

<body>
<div id="cpp">
  <div id="container" style="width: 200px;height: 200px"></div>
</div>
<script type="text/javascript">
  let cpp=new Vue({
    el:"#cpp",
    data:{
      wendu:22,
    },
    methods:{

    },
    created() {
    },
    mounted() {
      var dom = document.getElementById('container');
      var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
      });
      var params = {
        value: this.wendu,//数值
        title: "温度计"
      }

      var app = {};
      var TP_value = params.value;
      var kd = [];
      var Gradient = [];
      var leftColor = '';
      var showValue = '';
      var boxPosition = [65, 0];
      var TP_txt = ''
      // 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
      for (var i = 0, len = 135; i <= len; i++) {
        if (i < 10 || i > 130) {
          kd.push('')
        } else {
          if ((i - 10) % 20 === 0) {
            kd.push('-3');
          } else if ((i - 10) % 4 === 0) {
            kd.push('-1');
          } else {
            kd.push('');
          }
        }

      }
      //中间线的渐变色和文本内容
      if (TP_value > 50) {
        TP_txt = '';
        Gradient.push({
          offset: 0,
          color: '#93FE94'
        }, {
          offset: 0.5,
          color: '#E4D225'
        }, {
          offset: 1,
          color: '#E01F28'
        })
      } else if (TP_value >= 35) {
        TP_txt = '';
        Gradient.push({
          offset: 0,
          color: '#93FE94'
        }, {
          offset: 1,
          color: '#E4D225'
        })
      } else {
        TP_txt = '';
        Gradient.push({
          offset: 1,
          color: '#93FE94'
        })
      }

      leftColor = Gradient[Gradient.length - 1].color;
      // 因为柱状初始化为0，温度存在负值，所以加上负值60和空出距离10
      var option = {
        // backgroundColor: '#098',
        // backgroundColor: 'white',
        title: {
          text: params.title,
          textStyle: {
            color: "#010081",
            align: "center",
          },
          left: "45%",
        },
        grid: { // 控制图的大小，调整下面这些值就可以，
          left: "30%",
          top: "3%",
          bottom: "14%",
        },
        yAxis: [{
          show: false,
          data: [],
          min: 0,
          max: 135,
          axisLine: {
            show: false
          }
        }, {
          show: false,
          min: 0,
          max: 50,
        }, {
          type: 'category',
          data: ['', '', '', '', '', '', '', '', '', ''],
          position: 'left',
          offset: -80,
          axisLabel: { // 单位
            fontSize: 10,
            color: 'black'
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
        }],

        xAxis: [{
          show: false,
          min: -10,
          max: 80,
          data: []
        }, {
          show: false,
          min: -10,
          max: 80,
          data: []
        }, {
          show: false,
          min: -10,
          max: 80,
          data: []
        }, {
          show: false,
          min: -5,
          max: 80,

        }],
        series: [{
          name: '条',
          type: 'bar',
          // 对应上面XAxis的第一个对)象配置
          xAxisIndex: 0,
          data: [{
            value: (TP_value + 30),//这个改那个颜色刻度的
            label: {
              normal: {
                show: true,
                position: boxPosition,
                width: 20,
                height: 100,
                formatter: '{back| ' + TP_value + ' }{unit|°C}\n{downTxt|' + TP_txt + '}',
                rich: {
                  back: {
                    align: 'center',
                    lineHeight: 50,
                    fontSize: 30,
                    fontFamily: 'digifacewide',
                    color: leftColor
                  },
                  unit: {
                    fontFamily: '微软雅黑',
                    fontSize: 15,
                    lineHeight: 50,
                    color: leftColor
                  },
                  downTxt: {
                    lineHeight: 50,
                    fontSize: 25,
                    align: 'center',
                    color: leftColor
                  }
                }
              }
            },
          }],

          barWidth: 18,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, Gradient)
            }
          },
          z: 2
        }, {
          name: '白框',
          type: 'bar',
          xAxisIndex: 1,
          barGap: '-100%',
          data: [134],
          barWidth: 18,
          itemStyle: {
            normal: {
              color: '#0C2E6D',
              barBorderRadius: 50,
            }
          },
          z: 1
        }, {
          name: '外框',
          type: 'bar',
          xAxisIndex: 2,
          barGap: '-100%',
          data: [135],
          barWidth: 28,
          itemStyle: {
            normal: {
              color: '#4577BA',
              barBorderRadius: 50,
            }
          },
          z: 0
        }, {
          name: '圆',
          type: 'scatter',
          hoverAnimation: false,
          data: [0],
          xAxisIndex: 0,
          symbolSize: 38,
          itemStyle: {
            normal: {
              color: '#93FE94',
              opacity: 1,
            }
          },
          z: 2
        }, {
          name: '白圆',
          type: 'scatter',
          hoverAnimation: false,
          data: [0],
          xAxisIndex: 1,
          symbolSize: 50,
          itemStyle: {
            normal: {
              color: '#0C2E6D',
              opacity: 1,
            }
          },
          z: 1
        }, {
          name: '外圆',
          type: 'scatter',
          hoverAnimation: false,
          data: [0],
          xAxisIndex: 2,
          symbolSize: 60,
          itemStyle: {
            normal: {
              color: '#4577BA',
              opacity: 1,
            }
          },
          z: 0
        }, {
          name: '刻度',
          type: 'bar',
          yAxisIndex: 0,
          xAxisIndex: 3,
          label: {
            normal: {
              show: true,
              position: 'left',
              distance: 15, // 刻度数据位置
              color: '#000000',// 刻度数字颜色
              fontSize: 14,
              formatter: function (params) {
                if (params.dataIndex > 130 || params.dataIndex < 10) {
                  return '';
                } else {
                  if ((params.dataIndex - 10) % 20 === 0) {
                    return params.dataIndex - 30;//这个改刻度的，当减70的时候刻度是从-60开始不是从零开始
                  } else {
                    return '';
                  }
                }
              }
            }
          },
          barGap: '-100%',
          data: kd,
          barWidth: 1,
          itemStyle: {
            normal: {
              color: '#000000', // 刻度线颜色
              barBorderRadius: 120,
            }
          },
          z: 0
        }]
      };

      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
      ;
    }
  })


</script>
</body>

</html>


